/*
 * @Description: 点击节点展示的右键菜单
 * @Author: Rfan
 * @Date: 2022-02-18 16:23:01
 * @LastEditTime: 2022-07-02 18:12:50
 */

import { Item, Menu, Separator } from 'react-contexify';
import type { ItemParams } from 'react-contexify';
import {
  ADD_DATA_NODE_SAME_LEVEL,
  ADD_DATA_NODE_SUB_LEVEL,
  ADD_DESC_NODE_SAME_LEVEL,
  ADD_DESC_NODE_SUB_LEVEL,
  ADD_GROUP_NODE_SAME_LEVEL,
  ADD_GROUP_NODE_SUB_LEVEL,
  ARCHIVE_MGT,
  CHECK,
  DELETE,
  DELETE_NULL,
  EDIT,
  MOVE_DOWN,
  MOVE_UP,
  QUICK_ARCHIVE_NODE,
  RENAME,
  TOP_ID
} from '../constants';
import { initFolderTree } from '@/api/floderTree';
import { useFolderTreeContext } from '../contexts/FolderTreeContext';
import { arrToTree } from '@/utils';

const TopContextMenu = ({ nodeType }: any) => {
  const { setTreeData } = useFolderTreeContext();

  /**
   * @description: 判断右键菜单项目是否disable
   * @param {ItemParams} param1 条目相关数据
   * @return {boolean} 是否disable的状态
   */
  const itemDisabled = ({ triggerEvent, props, data }: ItemParams): boolean => {
    // console.log('disable', { triggerEvent, props, data, nodeType });
    return true;
  };

  /**
   * @description: 判断右键菜单项目是否隐藏
   * @param {ItemParams} param1 条目相关数据
   * @return {boolean} 是否隐藏的状态
   */
  const itemHidden = ({ triggerEvent, props, data }: ItemParams): boolean => {
    // console.log('disable', { triggerEvent, props, data, nodeType });
    return false;
  };

  const handleItemClick = ({ event, props, data, triggerEvent }: ItemParams) => {
    // ⚠️ data and triggerEvent are not used. I've just added them so we have the full list of parameters

    // I use the id attribute defined on the `Item` to identify which one is it
    // this feel natural to my brain
    console.log('onContextMenu item', { event, props, data, triggerEvent });

    switch (data.type) {
      case ARCHIVE_MGT:
        // logic to remove the row
        console.log(props.key); // contain to item.id passed by `show`
        break;

      case QUICK_ARCHIVE_NODE:
        // logic to share
        initNodeTree();
        break;

      default:
        break;
    }
  };

  /**
   * @description: 初始化目录树
   */
  const initNodeTree = () => {
    initFolderTree().then((res) => {
      const initData = res.data;
      setTreeData(
        arrToTree(
          initData
            .filter((node: any) => node.nodeType !== 1)
            .map((item: any) => {
              return {
                ...item,
                pid: item.nodeType === 2 ? 0 : item.pid,
                isLeaf: item.leafNode
              };
            })
        )
      );
    });
  };

  return (
    <Menu id={TOP_ID}>
      <Item data={{ type: ARCHIVE_MGT }} key={ARCHIVE_MGT} disabled onClick={handleItemClick}>
        档案节点管理
      </Item>
      <Item data={{ type: QUICK_ARCHIVE_NODE }} onClick={handleItemClick}>
        快捷生成档案节点
      </Item>
      <Separator />

      <Item
        data={{ type: ADD_DATA_NODE_SAME_LEVEL }}
        disabled={itemDisabled}
        hidden={itemHidden}
        onClick={handleItemClick}
      >
        添加数据节点（同级）
      </Item>
      <Item
        data={{ type: ADD_DATA_NODE_SUB_LEVEL }}
        disabled={itemDisabled}
        hidden={itemHidden}
        onClick={handleItemClick}
      >
        添加数据节点（子级）
      </Item>
      <Separator />

      <Item
        data={{ type: ADD_DESC_NODE_SAME_LEVEL }}
        disabled={itemDisabled}
        hidden={itemHidden}
        onClick={handleItemClick}
      >
        添加描述节点（同级）
      </Item>
      <Item
        data={{ type: ADD_DESC_NODE_SUB_LEVEL }}
        disabled={itemDisabled}
        hidden={itemHidden}
        onClick={handleItemClick}
      >
        添加描述节点（子级）
      </Item>
      <Separator />

      <Item
        data={{ type: ADD_GROUP_NODE_SAME_LEVEL }}
        disabled={itemDisabled}
        hidden={itemHidden}
        onClick={handleItemClick}
      >
        添加分组节点（同级）
      </Item>
      <Item
        data={{ type: ADD_GROUP_NODE_SUB_LEVEL }}
        disabled={itemDisabled}
        hidden={itemHidden}
        onClick={handleItemClick}
      >
        添加分组节点（子级）
      </Item>
      <Separator />

      <Item data={{ type: MOVE_UP }} disabled={itemDisabled} onClick={handleItemClick}>
        上移（同级）
      </Item>
      <Item data={{ type: MOVE_DOWN }} disabled={itemDisabled} onClick={handleItemClick}>
        下移（同级）
      </Item>
      <Separator />

      <Item data={{ type: DELETE }} disabled={itemDisabled} onClick={handleItemClick}>
        删除
      </Item>
      <Item data={{ type: EDIT }} disabled={itemDisabled} onClick={handleItemClick}>
        修改
      </Item>
      <Item data={{ type: CHECK }} disabled={itemDisabled} onClick={handleItemClick}>
        查看
      </Item>
      <Item data={{ type: DELETE_NULL }} disabled={itemDisabled} onClick={handleItemClick}>
        删除空节点
      </Item>
      <Item data={{ type: RENAME }} disabled={itemDisabled} onClick={handleItemClick}>
        重命名
      </Item>
    </Menu>
  );
};

export default TopContextMenu;
